<template>
  <div class="weatherwrap" v-show="this.$store.state.isShowWeatherPage">
    <!-- 头部标签 -->
    <div class="tag">
      <van-tag class="tag-item" type="primary">Weather Info</van-tag>
      <van-tag class="tag-item" type="primary">SMART RETIRMENT</van-tag>
    </div>
    <!-- 中上温度信息 -->
    <div class="maincontent">
      <van-row justify="center">
        <!-- 天气图标 -->
        <van-col span="12">
          <van-image
            width="1.8rem"
            height="1.8rem"
            fit="contain"
            :src="weatherForcastImg"
          />
        </van-col>
        <!-- 位置信息 -->
        <van-col class="address-items" span="12">
          <van-row class="address-item" justify="center"
            ><span class="cityInfo">{{ city }}</span></van-row
          >
          <van-row class="address-item" justify="center"
            ><span class="cityInfo">{{ domain }}</span></van-row
          >
        </van-col>
      </van-row>
    </div>
    <!-- 中部主要信息 -->
    <div class="mainweatherinfo">
      <!-- 温度信息 -->
      <van-row>
        <van-col class="tempature" span="24">{{ tempature }}°</van-col>
      </van-row>
      <!-- 大气压值&风力等级&云量&降水量值 -->
      <van-row class="detailitems">
        <van-col
          class="detail-item"
          v-for="(item, index) in weatheritems"
          :key="index"
          span="6"
        >
          <van-image round width="0.6rem" height="0.6rem" :src="item.img" />
          <span v-text="item.value"></span>
        </van-col>
      </van-row>
    </div>
    <!-- 底部72小时的天气预测 -->
    <div class="forcast">
      <van-row class="forcast-items">
        <van-col
          class="forcast-item"
          span="8"
          v-for="(item, index) in weatherForcast"
          :key="index"
        >
          <span class="item" v-text="item.date"></span>
          <van-image
            class="item"
            round
            width="0.6rem"
            height="0.6rem"
            :src="item.img"
          />
          <span class="item" v-text="item.tempature"></span>
        </van-col>
        <!-- <van-col class="forcast-item" span="8">
          <span class="item">05.21</span>
          <van-image
            class="item"
            round
            width="0.6rem"
            height="0.6rem"
            src="weatherForcastImg"
          />
          <span class="item">35°</span>
        </van-col>
        <van-col class="forcast-item" span="8">
          <span class="item">05.21</span>
          <van-image
            class="item"
            round
            width="0.6rem"
            height="0.6rem"
            src="weatherForcastImg"
          />
          <span class="item">35°</span>
        </van-col> -->
      </van-row>
    </div>
  </div>
</template>
<script>
import { Notify } from 'vant'
import * as SERVICE from '../utils/service'
import axios from 'axios'
export default {
  data() {
    return {
      weatherForcastImg: require('../../static/imgs/weather/101.png'),
      weatheritems: [
        {
          img: require('../../static/imgs/weatherpage/pressure.png'),
          value: '12kp',
        },
        {
          img: require('../../static/imgs/weatherpage/wind.png'),
          value: '12kp',
        },
        {
          img: require('../../static/imgs/weatherpage/cloud.png'),
          value: '12kp',
        },
        {
          img: require('../../static/imgs/weatherpage/rain.png'),
          value: '12kp',
        },
      ],

      city: '中国,焦作', ////国家,城市
      domain: '山阳区', //县区
      tempature: '', //温度值
      weatherForcast: [], //未来温度预测值
    }
  },
  computed: {
    onShowWaeatherPage() {
      return this.$store.state.isShowWeatherPage
    },
  },
  mounted() {
    let _this = this
    this.$nextTick(() => {
      _this.initInfo()
    })
  },
  watch: {
    onShowWaeatherPage(value) {
      if (value) {
        this.initInfo()
      }
    },
  },
  methods: {
    initInfo() {
      //ak:
      let _this = this
      navigator.geolocation.getCurrentPosition(
        function (position) {
          //获取当前经纬度信息-HTML5的地理定位返回的应该都是GPS坐标，即WGS-84坐标
          let posCoord = position.coords
          //记录经纬度值
          let lnglat = [posCoord.longitude, posCoord.latitude]
          console.log(lnglat[0] + ',' + lnglat[1])
          axios({
            url: 'https://devapi.qweather.com/v7/weather/3d',
            method: 'get',
            params: {
              location: lnglat[0] + ',' + lnglat[1],
              key: '589d699389904131a904dab25872c6a9',
              lang: 'zh',
            },
            dataType: 'json',
            async: false,
          }).then((res) => {
            console.log(res)
            let data = res.data
            //解析数据
            if (data.code == '200') {
              let daily = data.daily

              //天气信息
              _this.$data.tempature =
                (parseInt(daily[0].tempMax) + parseInt(daily[0].tempMin)) / 2 //温度值
              _this.$data.weatheritems[0].value = daily[0].pressure + 'p' //气压值
              _this.$data.weatheritems[1].value = daily[0].windScaleDay //风力等级
              _this.$data.weatheritems[2].value = daily[0].textDay //云量
              _this.$data.weatheritems[3].value = daily[0].precip //降水量
              let len = daily.length - 1
              //加载之前先清空数据集
              _this.$data.weatherForcast = []
              while (len >= 0) {
                _this.$data.weatherForcast.unshift({
                  date: daily[len].fxDate.substr(
                    daily[len].fxDate.indexOf('-') + 1
                  ),
                  tempature:
                    (parseInt(daily[len].tempMax) +
                      parseInt(daily[len].tempMin)) /
                    2,
                  img: require('../../static/imgs/weather/' +
                    `${daily[len].iconDay}` +
                    '.png'),
                })
                len--
              }
            }
          })

          //发送数据请求，获取天气数据
          // SERVICE.getWeatherInfo(posCoord.longitude, posCoord.latitude).then(
          //   (res) => {
          //     let data = res.data
          //     //获取城市信息
          //     _this.$data.city = data.city
          //     _this.$data.domain = data.domain
          //     //解析数据
          //     _this.$data.tempature =
          //       (parseInt(data.res[0].tempMax) +
          //         parseInt(data.res[0].tempMin)) /
          //       2 //温度值
          //     _this.$data.weatheritems[0].value = data.res[0].pressure + 'p' //气压值
          //     _this.$data.weatheritems[1].value = data.res[0].windScaleDay //风力等级
          //     _this.$data.weatheritems[2].value = data.res[0].textDay //云量
          //     _this.$data.weatheritems[3].value = data.res[0].precip //降水量
          //     //遍历结果集
          //     _this.$data.weatherForcast = [] //清除上次执行的结果
          //     let len = data.res.length - 1
          //     while (len >= 0) {
          //       _this.$data.weatherForcast.unshift({
          //         date: data.res[len].fxDate.substr(
          //           data.res[len].fxDate.indexOf('-') + 1
          //         ),
          //         tempature:
          //           (parseInt(data.res[len].tempMax) +
          //             parseInt(data.res[len].tempMin)) /
          //           2,
          //         img: require('../../static/imgs/weather/' +
          //           `${data.res[len].iconDay}` +
          //           '.png'),
          //       })
          //       len--
          //     }
          //   }
          // )
        },
        function (error) {
          //直接向和风天气接口发起请求

          Notify({ type: 'danger', message: '获取天气信息失败！' })
        }
      )
    },
  },
}
</script>
<style lang="less" scoped>
.weatherwrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../static/imgs/weatherpage/bk.jpg');
  // color: rgb(255, 255, 255);
  color: orangered;
  background-size: contain;
  z-index: 7;
  .cityInfo {
    display: inline-block;
  }
  .cityInfo:first-child {
    font-size: 0.32rem;
  }
  // 头部标签
  .tag {
    .tag-item {
      margin-left: 15px;
    }
  }
  // 中部温度信息
  .maincontent {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    height: 70px;
    .address-items {
      // 位置信息
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 10px;
      font-size: 0.4rem;
      height: 100%;
      .address-item {
        flex: 1;
      }
    }
  }
  // 中部主要信息
  .mainweatherinfo {
    margin-top: 15px;
    .tempature {
      //温度值信息
      font-size: 4rem;
    }
    .detailitems {
      height: 35px;
      .detail-item {
        font-size: 0.6rem;
        height: 100%;
      }
    }
  }
  // 底部72小时内的天气预报信息
  .forcast {
    margin-top: 15px;
    background-color: rgb(224, 201, 224);

    .forcast-items {
      display: flex;
      flex-direction: row;

      .forcast-item {
        padding: 0.1rem;
        border-right: 1px solid #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .item {
          font-size: 0.8rem;
          align-self: center;
          padding-top: 0.1rem;
        }
      }
      .forcast-item:first-child {
        border-left: 1px solid #fff;
      }
    }
  }
}
</style>
